//以下是"webpack": "4.8.3", "webpack-cli": "^2.0.13"的配置
/* 
 * MiniCssExtractPlugin插件地址https://github.com/webpack-contrib/mini-css-extract-plugin
 * 可以把css打包成外部文件，而不像style-loader一样把内联到文件中 
 */
//如果devDependencies里没有写这2个："webpack": "^4.4.0","webpack-cli": "^2.0.13"的话，就会在调用插件打包时，出现未定义webpack的错误
//说明https://segmentfault.com/a/1190000012789253
const path = require('path')

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== 'production';//得先在package.json里设置cross-env NODE_ENV=development


module.exports = {
  entry: {
    index: './src/index.js'
    //search: './src/js/search.js',
  },
  output: {
    //此处的[name]对应entry的key值
    filename: './js/[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      //filename: "css/[hash:5].css",
      filename: devMode ? './css/[name].css' : './css/[name].[hash:6].css',
      chunkFilename: devMode ? './css/[id].css' : './css/[name].[hash:5].css',
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        exclude: /(node_modules|bower_components)/,
        //use: [MiniCssExtractPlugin.loader,"css-loader"]
        //use: [MiniCssExtractPlugin.loader,'vue-style-loader',"css-loader"]
        //css-loader会处理 import / require（） @import / url 引入的内容。
        use: [MiniCssExtractPlugin.loader, "css-loader"]//经过测试,有了MiniCssExtractPlugin.loader,就可以不用vue-style-loader
      },
      {
        test: /\.(png|jpg|gif|woff|woff2|svg|ttf|eot)$/i,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //默认正好是8kb
              limit: 8192,
              // name: 'img/[name].[hash:7].[ext]'
              publicPath: devMode ? '../' : '/assets/',//打包文件中所有通过<<相对路径引用的资源>>都会被配置的路径所替换
              name: 'img/[name].[ext]'
              //css文件bg的路径中,图片路径要写对,但是dev和build打包的路径以publicPath与name为准,也就是这2个key组成了图片最后的路径
            }
          }
        ]
      }]
  },
  resolve: {
    extensions: ['.js', '.vue'],
    alias: {
      //'vue$': 'vue/dist/vue.esm.js',//使用compiler版的vue
      'vue$': 'vue/dist/vue.runtime.esm.js',//使用runtime版的vue
      "@": path.join(__dirname, 'src')
      //'@': path.resolve(__dirname,'./src/components/')
    }
  },
}